Infocomponent

Icon Item 

<div>
  <icon-info-item id="icon-info-item-icon" />
</div>
<hr />
<div>
  <icon-info-item id="icon-info-item-avatar" />
</div>
<hr />
<div>
  <icon-info-item id="icon-info-item-textonly" />
</div>
<hr />
<div>
  <icon-info-item id="icon-info-builtin-icon" />
</div>
const dataIcon = {
    showAvatar: false,
    iconBgColor: "SlateBlue",
    iconSrc: "zmdi",
    icon: "zmdi-calendar-check",
    iconColor: "white",
    body: "Body. Supports bold etc."
};

const dataAvatar = {
    showAvatar: true,
    avatarInitials: "HE",
    body: "Avatar body. Supports italic etc."
};

const dataTextOnly = {
    showAvatar: false,
    avatarInitials: "HE",
    body: "No avatar or icon."
};

const dataBuiltinIcon = {
    showAvatar: false,
    iconSrc: "icon-cost-failed",
    // Pass options as a json blob with the "icon" prop.
    // Will be passed as opts to the tag/icon given in "iconSrc", e.g. icon-cost-failed.
    // NB! Must be a valid json blob, i.e. {"key": "val"}
    icon: '{"width": "60px", "height": "60px"}',
    body: "Built-in svg icon ('icon-cost-failed') used."
};

riot.mount('#icon-info-item-icon', dataIcon);
riot.mount('#icon-info-item-avatar', dataAvatar);
riot.mount('#icon-info-item-textonly', dataTextOnly);
riot.mount('#icon-info-builtin-icon', dataBuiltinIcon);

Period Report 

<period-report/>
let data = {
    income: {
        amount: 345000,
        change: '-238%',
        title: 'Intäkter'
    },
    cost: {
        amount: 345000,
        change: '1587%',
        title: 'Kostnader'
    },
    result: {
        amount: 345000,
        change: '5%',
        title: 'Resultat'
    },
    bank: {
        amount: 345000,
        change: '5%',
        title: 'Kassa & Bank'
    }
};
riot.mount('period-report', data);